import {
    createApp
} from 'vue'
import App from './App.vue'

console.log(createApp(App));
const app = createApp(App)
var MyTitle = {
    data() {
        return {
            title: 'val131231231231231312312313ue',
        };
    },
    template: `
    <h1>{{title}}</h1>
    `
}
app.component('my-title', MyTitle)
app.mount('#app')
    /**
     * createApp(App) 创建一个vue的应用
     * vue创建时组件的本质就是一个对象
     *  
     * createApp(App) ->根组件
     * createApp(App).component
     * 可以用在任何新创建的组件实例模板中
     * 公共的组件库，可能使用在组件树中的很多组件中的组件
     */
    /**
     * 组件注册
     * 
     * 全局注册
     * app.component(组件名，组件本身)
     * 
     * 局部注册
     *  export default{
     * 推荐组件名和使用组件时的标签名尽量一直
     *   PascalCase  有利于编辑器的代码补全，JSX使用PascalCase进行标签书写
     *               HTML是不会正常处理
     *               组件名称一律使用PascalCase，vue的组件都被看做一个类的模式
     *   kebab-case  符合w3c对标签使用的规范，避免现有或将来的HTML标签的重读
     *               避免有一些大小写不敏感的文件系统，解析出现问题
     * 
     *      name:'MyTitle',
     *      data() {
     *          return {
     *              property: 'value',
     *          };
     *      },
     *  }
     */

/**
 * Web components
 * vue模板系统 参考 Web components的规范来进行上层的设计
 * 
 * 自定义标签
 * 定义属性
 * 自定义组件  -》自定义标签-》渲染
 * 
 * html/dom 规范了web components
 * 
 * 希望有这种方案提供非开发者能自定义可重用的，可被浏览器正常解析的标签
 * 让逻辑样式标签被封装在一个组件中，最终用自定义标签 渲染视图
 * 
 * 标签： template slot
 * 容器： shadowDom
 * customElements.define
 */